<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-18 14:23:47
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:23:41
 * @FilePath: \nien-vue3-admin\src\views\finance\FinancialManagementTools\accountMaintain\index.vue
 * @Description: 新增\编辑弹窗
-->
<template>
  <el-dialog
    :before-close="cancel"
    :title="title"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px" 
    >
      <el-form-item label="客户名称" prop="customerCode">
        <el-select
          v-model="formData.customerCode"
          placeholder="请选择客户"
          clearable
        >
          <el-option
            v-for="dict in dicts[DictDirection.客户]"
            :key="dict.customerCode"
            :label="dict.customerName"
            :value="dict.customerCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="纳税人识别号" prop="identificationNo">
        <el-input v-model="formData.identificationNo" placeholder="请输入纳税人识别号"></el-input>
      </el-form-item>
      <el-form-item label="地址及电话" prop="addressAndTelephoneNo">
        <el-input v-model="formData.addressAndTelephoneNo" placeholder="请输入地址及电话"></el-input>
      </el-form-item>
      <el-form-item label="开户行及账号" prop="bankAccountNo">
        <el-input v-model="formData.bankAccountNo" placeholder="请输入开户行及账号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="mail">
        <el-input v-model="formData.mail" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="formData.remarks" placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button type="primary" :loading="confirmLoading" @click="confirm">确定</el-button>
        <el-button type="info" :loading="confirmLoading" @click="cancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive, getCurrentInstance, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { insert, update } from '@/api/finance/FinancialManagementTools'

const {
  appContext: {
    config: {
      globalProperties: { $validateForm },
    },
  },
} = getCurrentInstance()

const dicts = useDicts()
dicts.setDicts(DictDirection.客户)

const emits = defineEmits(['success'])
const formRef = ref(null)
const confirmLoading = ref<boolean>(false)
const visible = ref<boolean>(false)
const title = ref<string>('')
const formData = reactive({
  customerCode: '',
  identificationNo: '',
  addressAndTelephoneNo: '',
  bankAccountNo: '',
  mail: '',
  remarks: '',
  id: '',
})
const rules = {
  customerCode: [{ required: true, message: '请选择客户名称', trigger: ['change', 'blur'] }],
  identificationNo: [{ required: true, message: '请输入纳税人识别号', trigger: ['blur'] }],
  addressAndTelephoneNo: [{ required: true, message: '请输入地址及电话', trigger: ['blur'] }],
  bankAccountNo: [{ required: true, message: '请输入开户行及账号', trigger: ['blur'] }],
}

const open = (t:string, row?:{id:string, [key:string]: any}) => {
  visible.value = true
  title.value = t
  
  if (t === '修改') {
    const {
      id,
      customerCode,
      identificationNo,
      addressAndTelephoneNo,
      bankAccountNo,
      mail,
      remarks,
    } = row
    nextTick(() => {
      // el-form渲染完成再赋值，resetFields是初始到渲染时的值
      Object.assign(formData, {
        id,
        customerCode,
        identificationNo,
        addressAndTelephoneNo,
        bankAccountNo,
        mail,
        remarks,
      })
    })
  }
}
const api = () => (title.value === '修改' ? update : insert)

const confirm = () => {
  $validateForm(formRef.value, () => {
    confirmLoading.value = true
    api()(formData).then(res => {
      if (res.code === 200) {
        ElMessage.success(`${ title.value }成功！`)
        emits('success')
        cancel()
      }
    }).finally(() => {
      confirmLoading.value = false
    })
  })
}
const cancel = () => {
  visible.value = false
  formRef.value && formRef.value.resetFields()
}

defineExpose({
  open,
})
</script>